<template>
	<div>
		<div class="mt-20px">
			<div class="flex items-center">
				<p class=" text-14px rounded-4px w-46px box-border flex items-center justify-center h-30px mr-20px cursor-pointer"
					:class="{ 'text-#ffffff bg-#114CEE': selected == '活期', 'text-#86909C bg-#E5E6EB ': selected != '活期' }"
					@click="selected = '活期'">活期</p>
				<p class="text-14px rounded-4px w-46px box-border flex items-center justify-center h-30px cursor-pointer"
					:class="{ 'text-#ffffff bg-#114CEE': selected == '定期', 'text-#86909C bg-#E5E6EB ': selected != '定期' }"
					@click="selected = '定期'">定期</p>
			</div>
			<div class="flex items-center text-14px text-#000000 mt-20px ">
				<p class="mr-30px">笔数: 3笔</p>
				<p>资产: 0.00 USDT</p>
			</div>
		</div>
		<div class="mt-20px">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="coin" label="名称">
					<template #default="scope">
						<div class="pt-10px pb-10px flex items-center">
							<img :src="scope.row.icon" alt="" class="w-[20px] h-[20px] mr-[5px]">
							<span class="text-[#333333] text-[14px] font-[400]">{{ scope.row.coin }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="资产名称" />
				<el-table-column prop="sum" label="总金额" />
				<el-table-column prop="term" label="期限" />
				<el-table-column prop="profit" label="年化收益率" />
				<el-table-column label="操作" align="right">
					<template #default="scope">
						<div class="pt-10px pb-10px flex items-center justify-end">
							<p class="text-[#114CEE] text-[14px] font-[400] mr-20px cursor-pointer" @click="madeClick">赎回
							</p>
							<p class="text-[#114CEE] text-[14px] font-[400] cursor-pointer" @click="detailClick">详情</p>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
	<FinancialDetails :is-show="financialDetailsShow" @close="closeFinancialDetails" />
	<EarlyRedemptions :is-show="earlyRedemptionsShow" @close="closeEarlyRedemptions" @confirm="confirmEarlyRedemptions">
	</EarlyRedemptions>
	<RedeemResult :is-show="redeemResultShow" @close="closeRedeemResult" />
	<RegularDetails :is-show="regularDetailsShow" @close="closeRegularDetails" />
	<WithdrawingAdvance :is-show="withdrawingAdvanceShow" @close="closeWithdrawingAdvance"
		@confirm="confirmWithdrawingAdvance" />
	<DrawResult :is-show="drawResultShow" @close="closeDrawResult" />
</template>
<script lang="ts" setup>
import FinancialDetails from '../pop/FinancialDetails.vue';
import EarlyRedemptions from '../pop/EarlyRedemptions.vue';
import RedeemResult from '../pop/RedeemResult.vue';
import RegularDetails from '../pop/RegularDetails.vue';
import WithdrawingAdvance from '../pop/WithdrawingAdvance.vue';
import DrawResult from '../pop/DrawResult.vue';
import { ref } from 'vue';

const selected = ref<string>('活期');

const tableData = ref<any[]>([
	{
		icon: '/purchase/btc.svg',
		coin: 'USDT',
		name: '理财二期Ⅱ',
		sum: '20000',
		term: '3天',
		profit: '3%'
	},
	{
		icon: '/purchase/btc.svg',
		coin: 'USDT',
		name: '理财二期Ⅱ',
		sum: '20000',
		term: '3天',
		profit: '3%'
	},
	{
		icon: '/purchase/btc.svg',
		coin: 'USDT',
		name: '理财二期Ⅱ',
		sum: '20000',
		term: '3天',
		profit: '3%'
	}
])

const financialDetailsShow = ref<boolean>(false);
const closeFinancialDetails = (val: boolean) => {
	financialDetailsShow.value = val;
};
const earlyRedemptionsShow = ref<boolean>(false);

const closeEarlyRedemptions = (val: boolean) => {
	earlyRedemptionsShow.value = val;
};

const confirmEarlyRedemptions = () => {
	earlyRedemptionsShow.value = false;
	redeemResultShow.value = true;
};

const redeemResultShow = ref<boolean>(false);

const closeRedeemResult = (val: boolean) => {
	redeemResultShow.value = val;
};

const regularDetailsShow = ref<boolean>(false);

const closeRegularDetails = (val: boolean) => {
	regularDetailsShow.value = val;
};


const withdrawingAdvanceShow = ref<boolean>(false);

const closeWithdrawingAdvance = (val: boolean) => {
	withdrawingAdvanceShow.value = val;
};

const confirmWithdrawingAdvance = () => {
	withdrawingAdvanceShow.value = false;
	drawResultShow.value = true;
};

const drawResultShow = ref<boolean>(false);

const closeDrawResult = (val: boolean) => {
	drawResultShow.value = val;
};
// ----------
const detailClick = () => {
	if (selected.value == '活期') {
		financialDetailsShow.value = true;
	}
	if (selected.value == '定期') {
		regularDetailsShow.value = true;
	}
};

const madeClick = () => {
	if (selected.value == '活期') {
		earlyRedemptionsShow.value = true;
	}
	if (selected.value == '定期') {
		withdrawingAdvanceShow.value = true;
	}
};
</script>
